<div class="col">
  <div class="custom-card bg-charcoal-surface1 h-100 thumbnail-hover-dark">
    <a href="/pixivision/a/{{.ID}}">
      <div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
        <img src="{{.Thumbnail}}" class="card-img-top rounded-top-5" alt="{{.Title}}" />
      </div>
    </a>
    <div class="custom-card-body">
      <!-- Title -->
      <h4 class="lh-lg">
        <a href="/pixivision/a/{{.ID}}" class="text-body text-decoration-none">
          {{.Title}}
        </a>
      </h4>
      <!-- NOTE: would not have figured out the following classes without referring to the actual pixivision web site -->
      <div class="d-flex align-content-between align-items-baseline">
          <!-- Tags -->
          <div>
            {{- range _, tag := .Tags }}
            <div class="d-inline-block mb-2 me-2">
              <small>
                <a href="/pixivision/t/{{ tag.ID }}" class="text-primary-emphasis fw-semibold text-decoration-none text-wrap p-0 mb-0">#{{ tag.Name }}</a>
              </small>
            </div>
            {{- end }}
          </div>
          <!-- Publication Date -->
          <!-- NOTE: d-inline-flex required for the child elements to not wrap weirdly when there are a lot of tags -->
          <p class="d-inline-flex text-body-secondary small mb-0 ms-auto">
              <i class="bi bi-calendar me-2"></i>{{parseTimeCustomFormat(.Date, "2006-01-02")}}
          </p>
      </div>
    </div>
  </div>
</div>
